<!-- 首页面 -->
<template>
    <div class="">
     <h2>主页面</h2>
      <ul>
        <li><router-link 
        :to="{ 
          name: 'AName',
          query: { 
            id: 2, 
            name: '李四'
          },
        }"> A组件 =>AName</router-link></li>

        <li><router-link :to="{ path: '/home/A'}"> A组件 path=>AName -------</router-link></li>

        <li><router-link to="/home/A?id=1&name=张三"> A组件 </router-link></li>

        <li><router-link to="/home/B/3/王五"> B组件 </router-link></li>
        <li><router-link 
          :to="{
            name:'BName',
            params: {
              id: 4, 
              name: '赵六'
            }
          }"> B组件 => params--name </router-link></li>

        <li><router-link to="/home/C/9/周杰伦"> C组件 </router-link></li>
        <li><router-link 
          :to="{
            name: 'CName',
            params: {
              id: 7, 
              name: '钱七'
            },
            query: {
              age: 18
            }
            
          }"> C组件 -------接受props </router-link></li>
      </ul>
      <div>
        <router-view ></router-view>
      </div>
     <input type="text">
    </div>
  </template>
  
  <script>
  export default {
    name: "HomeIndex",
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
      //这里存放数据
      return {};
    },
  };
  </script>
  <style lang='less' scoped>
  //@import url(); 引入公共css类
  </style>
  